<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>表格事件</title>
</head>
<style>
	* {
	    margin: 0px;
	    padding: 0px;
	}
 	html{
	  background:#2E4250; 
	  overflow: hidden;
	}
	::-webkit-scrollbar{
		  display:none;
		}
	.box{
 		height: 960px;
		overflow: auto;
	}
  	.box table{
    	width: 100%;
    	border-collapse: collapse;
    	border-right: 1px solid #ccc;
    	text-align: center;
    	}
  	.box table .thead th{
    	background-color: #ccc;
    	border: 1px solid #EBEEF5;
    	color:ghostwhite ;
    	height: 90px;
    	line-height: 90px; 
    	font-size: 48px;
    	z-index: 100;}
  	.box table th, .box table td{
    	border-bottom: 1px solid #ccc;
	    white-space: nowrap;
	    border: 1px solid #EBEEF5;
	    font-size: 24px;
	    line-height: 60px;
	    position: relative;
	    }
   

  	.box .red{
	      color: red;
		  }
  	.box table .yellow{
		    color:  yellow;
		  }
		table .green{
		    color: green;
		  }
		table tbody .pink{
		    color: pink;
		  }
		table tbody .blue{
		    color: blue;
		  }
	.box tr:hover {
			  background-color: darkgray; 
			}
	.box .red1{
	-webkit-animation:myfirst1 2s infinite;
	
		}
	.box .green1{
		-webkit-animation:myfirst 2s infinite;
	}
	.box table td img{
		margin: auto 0;
		margin-top: 20px;
		width: 20%;
		z-index: 0;
	}

	@-webkit-keyframes myfirst{
	0%   { -webkit-transform:translateY(10px)}
	30%   { -webkit-transform:translateY(7px)}
	50%   { -webkit-transform:translateY(5px)}
	70%   { -webkit-transform:translateY(3px)}
	100%  {-webkit-transform: translateY(1px)}	
	}
	@-webkit-keyframes myfirst1{
	0%   { -webkit-transform:translateY(-10px)}
	30%   { -webkit-transform:translateY(-7px)}
	50%   { -webkit-transform:translateY(-5px)}
	70%   { -webkit-transform:translateY(-3px)}
	100%  {-webkit-transform: translateY(-1px)}	
	}
</style>

<body>
    <div id="app" >  
	      <v-table
	        :tabledata = "tableData" 
            :thlabel="thlabel"
            :lablename="lablename"
            :criterion ='100'
            :cellscroll='false'
            :tablescroll='true'
            :speed = '40000'>	
	      </v-table>
	      <img src="img/down.png" />
	      <!--
	      tabledata：数据；
	      thlable:表头数据；
	      lablename:索引参数
	      criterion:判断条件
	      cellscroll:单个单元格滚动
	      tablescroll：表身整体滚动
	      speed:表身滚动速度 (值越大速度越慢)
	      -->
        </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.12/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>

Vue.component('v-table',{
	template:'<div class="box"><table><thead class="thead"><tr><th v-for="label in thlabel" :style="`width:${label.width} %`">{{label.label}}</th><th>风向标</th></tr></thead><tbody class="tbody" @mouseover="mouseHover" @mouseout="mouseOut" ><tr v-for="data in tabledata" :class="judgeStatus(data.status)"><td v-for="key in lablename" :class="jundgeSpeed(data[key])">{{data[key]}}</td> <td><img class="green1" src="img/up.png"  alt=""  v-if="data.flag">  <img class="red1" src="img/down.png" alt="" v-else="data.flag"></td></tr></tbody></table></div>',
	props:['thlabel','tabledata','lablename','tablescroll','cellscroll','criterion','speed'],
	created(){
		 this.$nextTick(() => {
         	//固定表头位置
             var scrollTop;
			    $('.box').scroll(function() {
			        scrollTop = this.scrollTop;
			        $(this).find('thead tr th').css({
			            '-webkit-transform': 'translate(0, '+scrollTop+'px)',
			            '-ms-transform': 'translate(0, '+scrollTop+'px)',
			            'transform': 'translate(0, '+scrollTop+'px)'
			        });
			    });
         })
	},
	mounted(){
		if($(".tbody").height()>$(window).height() && this.tablescroll){
           		 this.settime()
           	}else if(this.cellscroll){
           		setInterval(this.scroll,4000);
           	}else{
           		return
           	}
	},
        methods:{
        	judgeStatus(val){
                if(val == '待处理'){
                    return 'red'
                }else if(val =='处理中'){
                    return 'yellow'
                }else{
                    return 'green'
                }
            },
            //根据speed条件设置相应的颜色
            jundgeSpeed(val){
                if(jQuery.type( val ) === "number")
                    if(val > this.criterion){
                        return 'pink'
                    }else{
                        return 'blue'
                    }    
            },
            //单个单元格进行滚动
             scroll:function(){
                this.tabledata.push(this.tabledata[0]);  // 将数组的第一个元素添加到数组的
                this.tabledata.shift();               //删除数组的第一个元素
             },
            /*表身滚动*/
            settime :function(){
               let naimateHeight = $(".tbody").height();
               let time = naimateHeight / this.speed;
                $(".box").animate({scrollTop:naimateHeight},this.speed ,function(){ 
                    setTimeout(function(){
                        window.history.go(0)
                       },5000)
                });   
            },
            /*鼠标移入停止*/
           mouseHover:function(){
           	if($(".tbody").height()>$(window).height() && this.tablescroll){
           		$('.box').stop();
           		/*setTimeout(function(){this.settime()},5000);*/
           		
           	}else{
           		return
           	} 	
           },
           /*鼠标移出*/
          mouseOut:function(){
          	if($(".tbody").height()>$(window).height()&& this.tablescroll){
           		 this.settime()
           	}else{
           		return
           	} 	
          }
        }
	
})


var example1 = new Vue({
    el: '#app',
        mounted(){
        	//this.settime()
        	//setTimeout(this.settime(),3000)
           /* this.$nextTick(function(){
	            if($('.tbody').height() > $(window).height() && this.tableScroll){	
	                this.settime()
	            }
                }
            )*/
        },  
    data: {
     	tableData:[{'indexNum':'1','locationName':'金工车间','equipmentName':'#001','happenTime':'2018-2-7','king' :'姜猩猩','status':'处理中','speed':50,flag:true},
                {'indexNum':'2','locationName':'机电车间','equipmentName':'#002','happenTime':'2018-2-8','king' :'姜猩猩','status':'待处理','speed':150},
                {'indexNum':'3','locationName':'注塑成车间','equipmentName':'#003','happenTime':'2018-2-9','king' :'姜猩猩','status':'已关闭','speed':90},
                {'indexNum':'4','locationName':'金工车间','equipmentName':'#004','happenTime':'2018-2-10','king' :'姜猩猩','status':'处理中','speed':80},
                {'indexNum':'5','locationName':'电机车间','equipmentName':'#005','happenTime':'2018-2-11','king' :'姜猩猩','status':'待处理','speed':110},
                {'indexNum':'6','locationName':'机电车间','equipmentName':'#002','happenTime':'2018-2-8','king' :'姜猩猩','status':'待处理','speed':150},
                {'indexNum':'7','locationName':'注塑成车间','equipmentName':'#003','happenTime':'2018-2-9','king' :'姜猩猩','status':'已关闭','speed':90},
                {'indexNum':'8','locationName':'金工车间','equipmentName':'#004','happenTime':'2018-2-10','king' :'姜猩猩','status':'处理中','speed':80},
                {'indexNum':'9','locationName':'电机车间','equipmentName':'#005','happenTime':'2018-2-11','king' :'姜猩猩','status':'待处理','speed':110},
                {'indexNum':'10','locationName':'电机车间','equipmentName':'#005','happenTime':'2018-2-11','king' :'姜猩猩','status':'待处理','speed':110},
                {'indexNum':'11','locationName':'机电车间','equipmentName':'#002','happenTime':'2018-2-8','king' :'姜猩猩','status':'待处理','speed':150},
                {'indexNum':'12','locationName':'注塑成车间','equipmentName':'#003','happenTime':'2018-2-9','king' :'姜猩猩','status':'已关闭','speed':90,flag:true},
                {'indexNum':'13','locationName':'金工车间','equipmentName':'#004','happenTime':'2018-2-10','king' :'姜猩猩','status':'处理中','speed':80},
                {'indexNum':'14','locationName':'电机车间','equipmentName':'#005','happenTime':'2018-2-11','king' :'姜猩猩','status':'待处理','speed':110},
                {'indexNum':'15','locationName':'注塑成车间','equipmentName':'#003','happenTime':'2018-2-9','king' :'姜猩猩','status':'已关闭','speed':90},
                {'indexNum':'4','locationName':'金工车间','equipmentName':'#004','happenTime':'2018-2-10','king' :'姜猩猩','status':'处理中','speed':80},
                {'indexNum':'5','locationName':'电机车间','equipmentName':'#005','happenTime':'2018-2-11','king' :'姜猩猩','status':'待处理','speed':110},
                {'indexNum':'6','locationName':'机电车间','equipmentName':'#002','happenTime':'2018-2-8','king' :'姜猩猩','status':'待处理','speed':150},
                {'indexNum':'7','locationName':'注塑成车间','equipmentName':'#003','happenTime':'2018-2-9','king' :'姜猩猩','status':'已关闭','speed':90,flag:true},
                {'indexNum':'8','locationName':'金工车间','equipmentName':'#004','happenTime':'2018-2-10','king' :'姜猩猩','status':'处理中','speed':80},
                {'indexNum':'9','locationName':'电机车间','equipmentName':'#005','happenTime':'2018-2-11','king' :'姜猩猩','status':'待处理','speed':110},
                {'indexNum':'10','locationName':'电机车间','equipmentName':'#005','happenTime':'2018-2-11','king' :'姜猩猩','status':'待处理','speed':110},
                {'indexNum':'11','locationName':'机电车间','equipmentName':'#002','happenTime':'2018-2-8','king' :'姜猩猩','status':'待处理','speed':150},
                {'indexNum':'12','locationName':'注塑成车间','equipmentName':'#003','happenTime':'2018-2-9','king' :'姜猩猩','status':'已关闭','speed':90},
                {'indexNum':'13','locationName':'金工车间','equipmentName':'#004','happenTime':'2018-2-10','king' :'姜猩猩','status':'处理中','speed':80},
                {'indexNum':'6','locationName':'机电车间','equipmentName':'#002','happenTime':'2018-2-8','king' :'姜猩猩','status':'待处理','speed':150,flag:true},
                {'indexNum':'7','locationName':'注塑成车间','equipmentName':'#003','happenTime':'2018-2-9','king' :'姜猩猩','status':'已关闭','speed':90},
                {'indexNum':'8','locationName':'金工车间','equipmentName':'#004','happenTime':'2018-2-10','king' :'姜猩猩','status':'处理中','speed':80},
                {'indexNum':'9','locationName':'电机车间','equipmentName':'#005','happenTime':'2018-2-11','king' :'姜猩猩','status':'待处理','speed':110},
                {'indexNum':'10','locationName':'电机车间','equipmentName':'#005','happenTime':'2018-2-11','king' :'姜猩猩','status':'待处理','speed':110,flag:true},
                {'indexNum':'11','locationName':'机电车间','equipmentName':'#002','happenTime':'2018-2-8','king' :'姜猩猩','status':'待处理','speed':150},
                {'indexNum':'12','locationName':'注塑成车间','equipmentName':'#003','happenTime':'2018-2-9','king' :'姜猩猩','status':'已关闭','speed':90},
                {'indexNum':'13','locationName':'金工车间','equipmentName':'#004','happenTime':'2018-2-10','king' :'姜猩猩','status':'处理中','speed':80},
                {'indexNum':'14','locationName':'电机车间','equipmentName':'#005','happenTime':'2018-2-11','king' :'姜猩猩','status':'待处理','speed':110},
                {'indexNum':'15','locationName':'注塑成车间','equipmentName':'#003','happenTime':'2018-2-9','king' :'姜猩猩','status':'已关闭','speed':90},
                {'indexNum':'16','locationName':'金工车间','equipmentName':'#004','happenTime':'2018-2-10','king' :'姜猩猩','status':'处理中','speed':80},
                {'indexNum':'17','locationName':'电机车间','equipmentName':'#005','happenTime':'2018-2-11','king' :'姜猩猩','status':'待处理','speed':110},],
       	thlabel:[{prop:'indexNum',label:'序号',width:10},
                {prop:'locationName',label:'车间名称',width:20},
                {prop:'equipmentName',label:'设备名称',width:20},
                {prop:'happenTime',label:'发生时间',width:10},
                {prop:'king' ,label:'负责人',width:10},
                {prop:'status' ,label:'状态',width:10},
                {prop:'status' ,label:'不知道',width:10},
                {prop:'speed' ,label:'速度',width:20}],
        lablename:['indexNum','locationName','equipmentName','happenTime','king','status','status','speed'],
        		tableScroll:true,
    },
    fiter:{
    	
    },
   
})

</script>

</html>